<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主题切换测试</title>
    <style>
        /* CSS 变量 */
        :root {
            /* 深色主题 */
            --color-primary: #0a0e1f;
            --color-secondary: #1a253d;
            --color-textPrimary: #ffffff;
            --color-textSecondary: rgba(255, 255, 255, 0.7);
            --color-accent: #00f5ff;
            --color-border: rgba(0, 245, 255, 0.2);
            --gradient-primary: linear-gradient(135deg, #0a0e1f 0%, #1a253d 50%, #243551 100%);
        }

        .theme-light {
            /* 浅色主题 */
            --color-primary: #ffffff;
            --color-secondary: #f8fafc;
            --color-textPrimary: #0f172a;
            --color-textSecondary: #334155;
            --color-accent: #0073e6;
            --color-border: rgba(0, 115, 230, 0.2);
            --gradient-primary: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
        }

        body {
            margin: 0;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--gradient-primary);
            color: var(--color-textPrimary);
            transition: all 0.3s ease;
            min-height: 100vh;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        .card {
            background: var(--color-secondary);
            border: 1px solid var(--color-border);
            border-radius: 12px;
            padding: 24px;
            margin: 16px 0;
            transition: all 0.3s ease;
        }

        h1 {
            color: var(--color-textPrimary);
            margin-bottom: 8px;
        }

        p {
            color: var(--color-textSecondary);
            line-height: 1.6;
        }

        .accent {
            color: var(--color-accent);
            font-weight: bold;
        }

        .theme-toggle {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--color-accent);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 24px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .theme-toggle:hover {
            transform: translateY(-2px);
            opacity: 0.9;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 16px;
            margin: 24px 0;
        }

        .feature {
            background: var(--color-secondary);
            border: 1px solid var(--color-border);
            border-radius: 8px;
            padding: 16px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .feature:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .theme-light .feature:hover {
            box-shadow: 0 8px 25px rgba(0, 115, 230, 0.15);
        }

        .theme-dark .feature:hover {
            box-shadow: 0 8px 25px rgba(0, 245, 255, 0.3);
        }

        .icon {
            width: 48px;
            height: 48px;
            margin: 0 auto 12px;
            background: var(--color-accent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
        }

        .current-theme {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: var(--color-secondary);
            border: 1px solid var(--color-border);
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <button class="theme-toggle" onclick="toggleTheme()">
        🌓 切换主题
    </button>

    <div class="current-theme">
        当前主题: <span class="accent" id="themeIndicator">深色主题</span>
    </div>

    <div class="container">
        <div class="card">
            <h1>🎨 主题切换功能测试</h1>
            <p>这是一个测试页面，用于验证<span class="accent">跨境政策咨询平台</span>的主题切换功能。</p>
            <p>点击右上角的按钮来切换深色和浅色主题，观察页面元素的颜色变化。</p>
        </div>

        <div class="feature-grid">
            <div class="feature">
                <div class="icon">🤖</div>
                <h3>AI智能问答</h3>
                <p>基于大模型的政策智能解答系统</p>
            </div>
            <div class="feature">
                <div class="icon">📋</div>
                <h3>政策中心</h3>
                <p>政策分析、查询、对比一站式服务</p>
            </div>
            <div class="feature">
                <div class="icon">🌏</div>
                <h3>跨境分析</h3>
                <p>全球贸易地图与智慧分析</p>
            </div>
            <div class="feature">
                <div class="icon">👤</div>
                <h3>个人中心</h3>
                <p>个性化设置与历史记录管理</p>
            </div>
        </div>

        <div class="card">
            <h2>主题特性测试</h2>
            <p><strong>深色主题特点：</strong></p>
            <ul>
                <li>深色背景，降低眼部疲劳</li>
                <li>电蓝色强调色 (<span class="accent">#00f5ff</span>)</li>
                <li>科技感十足的渐变背景</li>
            </ul>
            
            <p><strong>浅色主题特点：</strong></p>
            <ul>
                <li>明亮背景，提高可读性</li>
                <li>科技蓝强调色 (<span class="accent">#0073e6</span>)</li>
                <li>简洁清爽的视觉效果</li>
            </ul>
        </div>

        <div class="card">
            <h2>技术实现</h2>
            <p>使用 <span class="accent">CSS 变量</span> 和 <span class="accent">Vue.js 响应式系统</span> 实现：</p>
            <ul>
                <li>✅ 全局主题状态管理</li>
                <li>✅ 平滑的主题切换动画</li>
                <li>✅ 本地存储主题偏好</li>
                <li>✅ 系统主题检测</li>
                <li>✅ 所有组件主题适配</li>
            </ul>
        </div>
    </div>

    <script>
        let currentTheme = 'dark';
        const themeIndicator = document.getElementById('themeIndicator');

        function toggleTheme() {
            const body = document.body;
            
            if (currentTheme === 'dark') {
                body.classList.add('theme-light');
                body.classList.remove('theme-dark');
                currentTheme = 'light';
                themeIndicator.textContent = '浅色主题';
            } else {
                body.classList.add('theme-dark');
                body.classList.remove('theme-light');
                currentTheme = 'dark';
                themeIndicator.textContent = '深色主题';
            }

            // 保存到本地存储（模拟）
            console.log(`主题已切换到: ${currentTheme}`);
        }

        // 初始化
        document.body.classList.add('theme-dark');
    </script>
</body>
</html> 